<template>
    <span>
        <el-select v-model="selectValue" placeholder="请选择" clearable :disabled="disabled">
          <el-option
                  v-for="item in items"
                  :key="item.name"
                  :label="item.name"
                  :value="item.code">
          </el-option>
        </el-select>
        <input v-model="value" style="display: none"/>
    </span>
</template>

<script>
export default {
  name: 'ParentMenuSelect',
  props: {
    disabled: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    value: {
      type: String,
      default: function () {
        return ''
      }
    }
  },
  watch: {
    value: {
      deep: true,
      handler: function () {
        this.selectValue = this.value
      }
    },
    selectValue: {
      deep: true,
      handler: function () {
        this.$emit('input', this.selectValue)
      }
    }
  },
  data () {
    return {
      items: [],
      selectValue: ''
    }
  },
  created () {
    let vm = this
    vm.$axios.post(vm.$API.menu.dropdownList, this.$qs.stringify({needParentMenu: true})).then(response => {
      if (response.data.code === 2000) {
        vm.items = response.data.data
      } else {
        vm.$message.error(response.data.message)
      }
    })
    vm.selectValue = vm.value
  }
}
</script>

<style scoped>

</style>
